<template>
	<view>
		<view class="tn-padding-sm">
			<view v-show="total">
				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card" :isFull="true" @click="toDetail(item)">
						<text class="uni-body">
							<view style="display: flex; justify-content: space-between">
								<text style="line-height: 2em; color: #3a3a3a" class="label tn-text-xl tn-text-bold">编号：{{ item.caseName || '无' }}</text>
							</view>
							<view>
								<text class="label">
									当事人：
									<text class="value">{{ item.reporterName || "无" }} {{ item.reporterTel || "无" }}</text>
								</text>
							</view>
							<view>
								<text class="label">
									救援事件：
									<text class="value">
										{{item.caseDesc || "无" }}
									</text>
								</text>
							</view>
							
							
							<!--  1:满意 2:一般满意 0:不满意 3: 电话无人接听 * -->
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view v-if="item.hasVisit">
									<tn-tag
										v-if="item.satisfactionValue === 1"
										class="tn-padding-sm"
										style="border-radius: 6px"
										shape="radius"
										fontColor="tn-color-white"
										backgroundColor="tn-bg-green"
									>
										<text>满意</text>
									</tn-tag>
									<tn-tag
										v-else-if="item.satisfactionValue === 0"
										class="tn-padding-sm"
										style="border-radius: 6px"
										shape="radius"
										fontColor="tn-color-white"
										backgroundColor="tn-bg-green"
									>
										<text>不满意</text>
									</tn-tag>
									<tn-tag
										v-else-if="item.satisfactionValue === 3"
										class="tn-padding-sm"
										style="border-radius: 6px;width: auto;"
										shape="radius"
										fontColor="tn-color-white"
										backgroundColor="tn-bg-green"
									>
										<text>电话未接通</text>
									</tn-tag>
								</view>
								<view v-else>
									<tn-tag class="tn-padding-sm" style="border-radius: 6px" shape="radius" fontColor="tn-color-white" backgroundColor="tn-bg-red">
										<text>未回访</text>
									</tn-tag>
								</view>
								
								<view>
									<text class="label tn-text-xs">
										<text style="font-size: 15px;">生成时间：</text>
										<text class="value"  style="font-size: 15px;" v-if="item.hfTime">{{ item.hfTime.split(" ")[0]}}</text>
										<text class="value"  style="font-size: 15px;" v-else>无</text>
									</text>
								</view>
							</view>
						</text>
					</uni-card>
				</block>
				<view class="tn-margin-sm tn-padding-bottom-sm">
					<uni-pagination :total="total" v-model="query.pageNum" :pageSize="query.pageSize" @change="load"></uni-pagination>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import { caseList } from '@/api/visit.js';
export default {
	data() {
		return {
			query: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			list: []
		};
	},
	onShow() {
		setTimeout(uni.startPullDownRefresh, 500);
	},
	onPullDownRefresh() {
		this.load();
	},
	onUnload() {
		let list = getApp().globalData.apiList;
		list.values().forEach((item) => item.abort());
	},
	onHide() {
		let list = getApp().globalData.apiList;
		list.values().forEach((item) => item.abort());
	},
	methods: {
		load() {
			caseList(this.query)
				.then((res) => {
					this.total = res.total;
					this.list = res.rows;
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},
		toDetail(obj) {
			uni.setStorage({
				key: 'ANJIANINFO',
				data: obj
			});
			uni.navigateTo({
				url: '/pages/visit/detail?id=' + obj.id + '&hasVisit=' + obj.hasVisit
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.card {
	margin: 0 !important;
	border-radius: 6px;
	margin-top: 15px !important;

	::v-deep {
		.uni-card__header {
			.uni-card__header-box {
				.uni-card__header-content-title {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		.title {
			color: #333;
			line-height: 1.5em;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			padding: 2px;
			line-height: 2em;
		}

		.value {
			color: $tn-color-gray;
		}
	}
}

.add-btn {
	position: fixed;
	right: 40rpx;
	bottom: 100rpx;
	border-radius: 50%;
	padding: 30rpx;
}
.empty {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
}
</style>
